﻿
@{
    ViewData["Title"] = "Datamaps";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Maps</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Forms</a>
            </li>
            <li class="active breadcrumb-item">
                <strong>Maps</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>

<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Datamaps</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#" class="dropdown-item">Config option 1</a>
                            </li>
                            <li>
                                <a href="#" class="dropdown-item">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <strong>Datamaps</strong>
                    <p>
                        Interactive maps for data visualizations. Bundled into a single Javascript file.
                    </p>
                    <p>
                        Datamaps is intended to provide some data visualizations based on geographical data. It's SVG-based, can scale to any screen size, and includes everything inside of 1 script file. It heavily relies on the amazing D3.js library.
                        Full documentation can be found: <a href="https://github.com/markmarkoh/datamaps" target="_blank">https://github.com/markmarkoh/datamaps</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Basic example</h5>
                </div>
                <div class="ibox-content">
                    <div id="basic_map"></div>
                    <pre>
var basic = new Datamap({
    element: document.getElementById("basic_map"),
    responsive: true,
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
}); </pre>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>With selected regions</h5>
                </div>
                <div class="ibox-content">
                    <div id="selected_map"></div>
                    <pre>
var basic = new Datamap({
    element: document.getElementById("basic_map"),
    ...
    data: {
        USA: { fillKey: "active" },
        RUS: { fillKey: "active" },
        DEU: { fillKey: "active" },
        BRA: { fillKey: "active" }
    }
}); </pre>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>USA scope</h5>
                </div>
                <div class="ibox-content">
                    <div id="usa_map"></div>
                    <pre>
var usa_map = new Datamap({
    element: document.getElementById("usa_map"),
    responsive: true,
    scope: 'usa',
    fills: {
        defaultFill: "#DBDAD6"
    },
    geographyConfig: {
        highlightFillColor: '#1C977A',
        highlightBorderWidth: 0,
    },
    ...
}); </pre>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Map with arc</h5>
                </div>
                <div class="ibox-content">
                    <div id="arc_map"></div>
                    <pre>
var arc_map = new Datamap({
    element: document.getElementById("arc_map"),
    ...
});
arc_map.arc(
[
    { origin: 'USA', destination: 'RUS'},
    { origin: 'USA', destination: 'DEU'},
    { origin: 'USA', destination: 'POL'},
    { origin: 'USA', destination: 'JAP'},
    { origin: 'USA', destination: 'AUS'},
    { origin: 'USA', destination: 'BRA'}
],
{ strokeColor: '#2BA587', strokeWidth: 1}
);</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="float-right">
            10GB of <strong>250GB</strong> Free.
        </div>
        <div>
            <strong>Copyright</strong> Example Company &copy; 2014-2015
        </div>
    </div>
</div>



@section Scripts {
    <environment names="Development,Staging,Production">
        <script src="~/lib/d3/d3.js"></script>
        <script src="~/lib/topojson/topojson.js"></script>
        <script src="~/lib/datamaps/datamaps.all.min.js"></script>
    </environment>

    <script type="text/javascript">
        $(document).ready(function () {


            var basic = new Datamap({
                element: document.getElementById("basic_map"),
                responsive: true,
                fills: {
                    defaultFill: "#DBDAD6"
                },
                geographyConfig: {
                    highlightFillColor: '#1C977A',
                    highlightBorderWidth: 0,
                },
            });

            var selected_map = new Datamap({
                element: document.getElementById("selected_map"),
                responsive: true,
                fills: {
                    defaultFill: "#DBDAD6",
                    active: "#2BA587"
                },
                geographyConfig: {
                    highlightFillColor: '#1C977A',
                    highlightBorderWidth: 0,
                },
                data: {
                    USA: { fillKey: "active" },
                    RUS: { fillKey: "active" },
                    DEU: { fillKey: "active" },
                    BRA: { fillKey: "active" }
                }
            });

            var usa_map = new Datamap({
                element: document.getElementById("usa_map"),
                responsive: true,
                scope: 'usa',
                fills: {
                    defaultFill: "#DBDAD6",
                    active: "#2BA587"
                },
                geographyConfig: {
                    highlightFillColor: '#1C977A',
                    highlightBorderWidth: 0
                },
                data: {
                    NE: { fillKey: "active" },
                    CA: { fillKey: "active" },
                    NY: { fillKey: "active" },
                }
            });

            var arc_map = new Datamap({
                element: document.getElementById("arc_map"),
                responsive: true,
                fills: {
                    defaultFill: "#F2F2F0",
                    active: "#DBDAD6",
                    usa: "#269479"
                },
                geographyConfig: {
                    highlightFillColor: '#1C977A',
                    highlightBorderWidth: 0
                },
                data: {
                    USA: { fillKey: "usa" },
                    RUS: { fillKey: "active" },
                    DEU: { fillKey: "active" },
                    POL: { fillKey: "active" },
                    JAP: { fillKey: "active" },
                    AUS: { fillKey: "active" },
                    BRA: { fillKey: "active" }
                }
            });

            arc_map.arc(
                [
                    { origin: 'USA', destination: 'RUS' },
                    { origin: 'USA', destination: 'DEU' },
                    { origin: 'USA', destination: 'POL' },
                    { origin: 'USA', destination: 'JAP' },
                    { origin: 'USA', destination: 'AUS' },
                    { origin: 'USA', destination: 'BRA' }
                ],
                { strokeColor: '#2BA587', strokeWidth: 1 }
            );

            // Resize map on window resize
            $(window).on('resize', function () {
                setTimeout(function () {
                    basic.resize();
                    selected_map.resize();
                }, 100)
            });

        });
    </script>
}
